<template>
	<div class="homes">
		<input class="day_select" id="day_select" type="text" v-on:input="changes(this)" readonly="true" placeholder="日期选择特效" data-lcalendar="2016-05-11,2016-05-11" value="" />
		<span class="timess" v-show="isShowSpan" v-bind:class="[{isEdit:isEdit}]" style="color: #989898;">{{value | formDates}}</span>
		<div v-if="!isEdit" class="cover"></div>
	</div>
</template>

<script>
	import $ from 'jquery'
	import LCalendar from '../../common/date-picker/LCalendar'
	export default {
		components: {

		},
		props: {
			value: {

			},
			initial_value: {
				//				type: String,
				//				default: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
			},
			max_date: {
				//		      type: String,
				default: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
			},
			min_date: {
				//		      type: String,
				default: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
			},
			isEdit: {
				type: Boolean,
				default: false
			},
			disable: {
				type: String,
				default: undefined
			},
			color: {
				type: String,
				default: 'black'
			},
			font_size: {
				type: Number,
				default: 26
			},
			isShowSpan:{
				type: Boolean,
				default: true
			}
		},
		data() {
			return {

			}
		},
		watch: {
			initial_value(val, oldval) {
				console.log(val, oldval)
				if(oldval === '') {
				}
			}
		},
		mounted: function() {
			var calendar = new window.LCalendar();
			var that = this;
			calendar.init({
				'trigger': '#day_select', //标签id
				'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
				'minDate': that.min_date, //最小日期
				//				'maxDate': new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() //最大日期
				'maxDate': that.max_date
			});
			if(!this.initial_value || this.initial_value=='0'){
				$("#day_select").val('未选择');
			}else{
				$("#day_select").val(this.initial_value);
			}
			$("#day_select").css({
				'color': that.color
			})
			console.log(this.initial_value)
		},
		methods: {
			reset() {

			},
			changes(item) {
				console.log($("#day_select").val())
				var day = $("#day_select").val()
				//点击取消,排除汉字
				var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");　　
				if(reg.test(day)) {
					return;
				}
				//返回时间戳到父组件
				var time1 = Date.parse(new Date(day));
				console.log(time1)
				this.$emit('input', time1);
				
				$(".timess").css({'color':'black'})
				
			},
			select_customer(item) {
				this.current_customer = item
				this.customers_show = false;
			},
			calculation(size) {
				var font_size = Number(size) / 750 * document.body.clientWidth + 'px'
				//				console.log(font_size)
				$(".day_select").css({
					'font-size': font_size
				})
			},
			form_date() {
				var time = this.initial_value
				if(time == 0) {
					var dates = new Date()

				} else {
					var dates = new Date(Number(time))
				}
				var year = dates.getFullYear()
				var month = dates.getMonth() + 1
				var day = dates.getDate()
				return(year + '-' + month + '-' + day);
			}
		},
		filters: {
			formDates(val) {
				if(!val || val == '0') {
					return('未选择');
				} else {
					var dates = new Date(Number(val))
					var year = dates.getFullYear()
					var month = dates.getMonth() + 1
					var day = dates.getDate()
					return(year + '-' + month + '-' + day);
				}
			}
		}
	}
</script>
<style lang="less" scoped="scoped">
	@import '../../common/less/base.less';
	.homes {
		display: flex;
		height: 100%;
		z-index:1;
		.day_select {
			width: 100%;
		}
		input {
			opacity: 0.01;
			z-index: 999;
		}
		.cover {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 1000;
			top: 0;
			left: 0;
		}
		span {
			position: absolute;
			right: 0*@base_size_t;
			top: 50%;
			transform: translateY(-50%);
		}
		.isEdit {
			right: 45*@base_size_t;
		}
	}
	
	.text-right {
		text-align: right;
		>* {
			text-align: right;
		}
	}
</style>